<template>
  <iframe id="frame" height="1000" width="1000"></iframe>
</template>
<script>
if (document.location.protocol == 'file:' || window.location.search == '') {
        document.getElementById("usage").style.display = "block";
        alert('Incorrect usage, please follow the instructions at the top of this page.');
      }

      var query = '?';
      if (window.location.search !== '')
        query = window.location.search + '&';
      query += 'NotWOPIButIframe=true';

      var path = window.location.pathname.substr(0, window.location.pathname.lastIndexOf('/') + 1) + 'collabora.html';
      var uriBase = window.location.protocol + '//' + window.location.host + path + query;
      var iframe = document.getElementById("frame");
      iframe.src = uriBase;
      link.href = uriBase;
</script>

<script>

      function post(msg) {
        window.frames[0].postMessage(JSON.stringify(msg), '*');
      }

      function sendBoldUNOCommand() {
        post({'MessageId': 'Send_UNO_Command',
              'Values': { 'Command': '.uno:Bold' }
            });
      }

      function sendInsertBookMarkUNOCommand() {
        post({'MessageId': 'Send_UNO_Command',
              'Values': {
                'Command': '.uno:InsertBookmark',
                'Args': {
                  Bookmark: {
                    type: 'string',
                    value: 'Test Insert BookMark'
                  },
                  BookmarkText: {
                    type: 'string',
                    value: 'Text of the Test Insert BookMark'
                  }
                }
              }
            });
      }

      function insertText(text) {
        post({'MessageId': 'CallPythonScript',
              'SendTime': Date.now(),
              'ScriptFile': 'InsertText.py',
              'Function': 'InsertText',
              'Values': { 'text': {'type': 'string', 'value': text}}
            });
      }

      function capitalize() {
        post({'MessageId': 'CallPythonScript',
              'SendTime': Date.now(),
              'ScriptFile': 'Capitalise.py',
              'Function': 'capitalisePython',
              'Values': null
            });
      }

      function save() {
        post({'MessageId': 'Action_Save',
              'Values': { 'Notify': true, 'ExtendedData': 'CustomFlag=Custom Value;AnotherFlag=AnotherValue' }
            });
      }

      function closeDocument() {
        post({'MessageId': 'Action_Close',
              'Values': null
            });
      }

      function exportAsHtml() {
        post({'MessageId': 'Action_Export',
              'Values': { 'Format': 'html', }
            });
      }

      function hide_commands(id) {
        post({'MessageId': 'Hide_Menu_Item',
              'Values': { 'id': id, }
            });
        post({'MessageId': 'Hide_Button',
              'Values': { 'id': id, }
            });
      }

      function show_commands(id) {
        post({'MessageId': 'Show_Menu_Item',
              'Values': { 'id': id, }
            });
        post({'MessageId': 'Show_Button',
              'Values': { 'id': id, }
            });
      }

      function disable_default_uiaction(action, disable) {
        post({'MessageId': 'Disable_Default_UIAction',
              'Values': { 'action': action, 'disable': disable }
            });
      }

      function ShowMenubar(visible) {
        var messageId = visible ? 'Show_Menubar' : 'Hide_Menubar';
        post({'MessageId': 'Host_PostmessageReady'});
        post({'MessageId': messageId});
      }

      function ShowInsertButton() {
        post({'MessageId': 'Insert_Button',
              'Values': { 'id': 'Save', 'imgurl': 'images/lc_save.svg', 'hint': '', 'mobile': false, 'label': 'Show additional btns via Insert_Button', 'insertBefore': 'Save', 'unoCommand': '.uno:Save'}
            });
      }

      function ShowNotebookbar(notebookbar) {
        var value = notebookbar ? 'notebookbar' : 'classic';
        post({'MessageId': 'Host_PostmessageReady'});
        post({'MessageId': 'Action_ChangeUIMode',
              'Values': {'Mode': value}});
      }

      function reset_access_token(accesstoken) {
        post({'MessageId': 'Reset_Access_Token',
              'Values': { 'token': accesstoken, }
            });
      }

      // This function is invoked when the iframe posts a message back.

      function receiveMessage(event) {
        console.log('==== framed.doc.html receiveMessage: ' + event.data);
        var msg = JSON.parse(event.data);
        if (!msg) {
          return;
        }
        if (msg.MessageId == 'App_LoadingStatus') {
          if (msg.Values) {
            if (msg.Values.Status == 'Document_Loaded') {
              post({'MessageId': 'Host_PostmessageReady'});
            }
          }
        } else if (msg.MessageId == 'Doc_ModifiedStatus') {
          if (msg.Values) {
            if (msg.Values.Modified == true) {
              document.getElementById("ModifiedStatus").innerHTML = "Modified";
            }
            else {
              document.getElementById("ModifiedStatus").innerHTML = "Saved";
            }
          }
        } else if (msg.MessageId == 'Action_Save_Resp') {
          if (msg.Values) {
            if (msg.Values.success == true) {
              document.getElementById("ModifiedStatus").innerHTML = "Saved";
            } else {
              document.getElementById("ModifiedStatus").innerHTML = "Error during save";
            }
          }
        } else if (msg.MessageId === 'UI_Mention') {
          var dummyUserDatabase = [ {
                                      username:'Abigail', 
                                      profile: 'Abigail profile link'
                                    }, 
                                    {
                                      username: 'Alexandra',
                                      profile: 'Alexandra profile link'
                                    },
                                    {
                                      username: 'Alison',
                                      profile: 'Alison profile link'
                                    },
                                    {
                                      username: 'Amanda',
                                      profile: 'Amanda profile link'
                                    },
                                    {
                                      username: 'Amelia',
                                      profile: 'Amelia profile link'
                                    },
                                    {
                                      username: 'Amy',
                                      profile: 'Amy profile link'
                                    },
                                    {
                                      username: 'Andrea',
                                      profile: 'Andrea profile link'
                                    },
                                    {
                                      username: 'Angela',
                                      profile: 'Angela profile link'
                                    },
                                    {
                                      username: 'Anna',
                                      profile: 'Anna profile link'
                                    },
                                    {
                                      username: 'Anne',
                                      profile: 'Anne profile link'
                                    },
                                    {
                                      username: 'Audrey',
                                      profile: 'Audrey profile link'
                                    },
                                    {
                                      username: 'Ava',
                                      profile: 'Ava profile link'
                                    },
                                    {
                                      username: 'Bella',
                                      profile: 'Bella profile link'
                                    },
                                    {
                                      username: 'Bernadette',
                                      profile: 'Bernadette profile link'
                                    },
                                    {
                                      username: 'Carol',
                                      profile: 'Carol profile link'
                                    },
                                    {
                                      username: 'Caroline',
                                      profile: 'Caroline profile link'
                                    },
                                    {
                                      username: 'Carolyn',
                                      profile: 'Carolyn profile link'
                                    },
                                    {
                                      username: 'xyz abc',
                                      profile: 'xyz abc profile link'
                                    } ]; 
          if (msg.Values) {
            var type = msg.Values.type;
            var text = msg.Values.text;

            var users = [];
            dummyUserDatabase.forEach(element => {
              if (element.username.includes(text))
                users.push(element);
            });      
            
            if (type === 'autocomplete')
            {
              setTimeout(post, 0,
                {
                  'MessageId': 'Action_Mention',
                  'SendTime': Date.now(),
                  'Values': {
                    'list': users,
                  }
                });
            }
          }
        }
      }

      // 'main' code of this <script> block, run when page is being
      // rendered. Install the message listener.
      window.addEventListener("message", receiveMessage, false);

    </script>